<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row style="text-align: left;">

          <el-form-item>
            <el-popover
              placement="right"
              title="请选择对账单"
              trigger="click"
              width="800"
              hight="1000"
              v-model="merchantVisible">
              <el-row>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <el-input v-model="filtersCyTable1.supplierId" placeholder="对账单号"></el-input>
                </el-form-item>
              </el-row>

              <el-row>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary"
                             @click="resetCyTable1"/>
                </el-form-item>
                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-refresh" :label="$t('action.reset')"
                             @click="resetCyTable1"
                             type="primary"/>
                </el-form-item>

                <el-form-item style="float:left;padding-top:10px;padding-left:15px;">
                  <kt-button icon="fa fa-hand-pointer-o" :label="$t('action.comfirm')"
                             @click="operationClick"
                             type="primary"/>
                </el-form-item>
              </el-row>
              <!--表格内容栏-->
              <cy-table1 :height="1000"
                         :data="pageResult" :columns="clickColumns"
                         @findPage="clinkMock" ref="CyTable1"
                         :showBatchDelete="false" :showDeleteOperation=false
                         :showEditOperation=false
                         :showDetailOperation=false :showOperation="false"
                         @handleDetail="handleDetail">
              </cy-table1>

              <el-button slot="reference">新增</el-button>
            </el-popover>
          </el-form-item>

        </el-row>

      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns"
                                  @handleFilterColumns="handleFilterColumns">
      </table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table :height="350"
              :data="pageResult" :columns="detailColumns"
              @findPage="findPageMock" ref="CyTable"
              :showOperation=false
              :showBatchDelete="false" :showDeleteOperation=false :showEditOperation=false
              :showDetailOperation=false @handleDetail="handleDetail">
    </cy-table>

  </div>
</template>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<script>
  import PopupTreeInput from "@/components/PopupTreeInput"
  import CyTable from "@/views/Core/CyTable"
  import CyTable1 from "@/views/Core/CyTable"
  import KtButton from "@/views/Core/KtButton"
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
  import {format} from "@/utils/datetime"

  export default {
    name: 'BillDetailForm',
    components: {
      PopupTreeInput,
      CyTable,
      CyTable1,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        imgUpload: this.utils.getUpLoadHost(),
        size: 'small',
        document_license: '',
        filters: {
          name: '',
          preparedStartTime: '',
          preparedEndTime: ''
        },
        filtersCyTable1: {},

        imgs: '',
        fileList: {},
        columns: [],
        warehouselist: [],
        filterColumns: [],
        detailColumns: [
          {prop: "billId", label: "店铺编码", minWidth: 120},
          {prop: "supplierId", label: "店铺名称", minWidth: 120},
          {prop: "supplierName", label: "对账单号", minWidth: 120},
          {prop: "currencyName", label: "单据类型", minWidth: 120},
          {prop: "exchangeRate", label: "进退折日期", minWidth: 120},
          {prop: "shouldPayAmount", label: "币别名称", minWidth: 120},
          {prop: "shouldPayAmount2", label: "汇率", minWidth: 120},
          {prop: "shouldPayAmount3", label: "应付", minWidth: 120},
          {prop: "shouldPayAmount4", label: "单据名称", minWidth: 120},
          {prop: "endDate", label: "到期日期", minWidth: 120},
        ],

        clickColumns: [
          {prop: "billId", label: "店铺编码", minWidth: 120},
          {prop: "supplierId", label: "店铺名称", minWidth: 120},
          {prop: "supplierName", label: "对账单号", minWidth: 120},
          {prop: "currencyName", label: "单据类型", minWidth: 120},
          {prop: "exchangeRate", label: "进退折日期", minWidth: 120},
          {prop: "shouldPayAmount", label: "币别名称", minWidth: 120},
          {prop: "shouldPayAmount2", label: "汇率", minWidth: 120},
          {prop: "shouldPayAmount3", label: "应付", minWidth: 120},
          {prop: "shouldPayAmount4", label: "单据名称", minWidth: 120},
          {prop: "endDate", label: "到期日期", minWidth: 120},
        ],
        clickDetail: {
          "rows":
            [{
              "billId":"123123",
              "supplierId": "1945233321",
              "supplierName": "对账人民币经销供应商",
              "currencyName":"CNY",
              "exchangeRate":"0.70",
              "shouldPayAmount":"47.98",
              "endDate":"2018-10-21"
            },
              {
                "supplierId": "1911290006873624",
                "supplierName": "对账美元经销供应商"
              }],
          "total": 2,
          "code": "0000"
        },
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
        pageResultDetail: {
          "rows":
            [{
              "billId": "12312312313",
              "supplierId": "3123123123123",
              "supplierName": "对账美元代销供应商",
              "currencyName": "CNY",
              "exchangeRate": "0.1423",
              "shouldPayAmount": "47.35",
              "endDate": "2019-12-06"
            }],
          "total": 1,
          "mock_title": "",
          "code": "0000"
        },
        dialogImageUrl: '',

        operation: false, // true:新增, false:编辑
        dialogVisible: false, // 新增编辑界面是否显示
        editLoading: false,
        printPage: false,
        dialogVisibleImage: false,
        merchantVisible: false,//商户页面是否显示
        dataForm: {},
        deptData: [],
        deptTreeProps: {
          label: 'name',
          children: 'children'
        },
        roles: [],
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },

      }
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        this.filters.t = 'billDetailForm'
        this.$refs.CyTable.findPage(this.filters)
      },
      //mock数据
      findPageMock: function () {
        this.$refs.CyTable.findPageMock(this.pageResultDetail)
      },
      clinkMock: function () {
        this.$refs.CyTable1.findPageMock(this.clickDetail)
      },
      // 根据日期查询数据
      findPageByDate: function (data) {
        this.filters.t = 'billDetailForm'
        this.$refs.CyTable.findPageByDate(this.filters)
      },
      //弹窗关闭方法
      handleClose() {
        this.$refs.dataForm.resetFields()
      },
      // 批量删除
      handleDelete: function (data) {
        var ids = '';
        for (var i = 0; i < data.params.length; i++) {
          ids = ids + data.params[i].id + ',';
        }
        data.t = 'billDetailForm'
        data.ids = ids
        this.utils.request.deleteUserInfo(data, this.deleteInfoBack)
      },
      //删除callback
      deleteInfoBack(data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败, ', type: 'error'})
        }
        this.findPage();
      },

      //导入方法
      importexe() {
        this.printPage = true;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },

      //列表下载
      downloadExcel() {
        this.$confirm('确定下载列表文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let filename = "对账明细"
          this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
        }).catch(() => {

        });
      },
      // 显示新增界面
      handleAdd: function () {
        this.dialogVisible = true
        this.operation = true
        this.dataForm.id = "";
        //this.dataForm={};
        if (this.$refs['dataForm'] != undefined) {
          this.$refs['dataForm'].resetFields();
        }
        this.dataForm.document_license = "";
      },
      // 打印
      print: function () {
        this.printPage = true
        this.operation = true
      },
      reset: function () {
        this.filters = {};
        this.findPageMock()
      },

      resetCyTable1: function () {
        this.filtersCyTable1 = {};
        this.clinkMock()
      },

      operationClick: function () {
        var this_ = this;
        this_.filters.supplier = "1945233321";
        this_.merchantVisible = false;
      },

      // 显示编辑界面
      handleDetail: function (params) {
        console.log(params)
        this.dialogVisible = true
        this.operation = false
        var this_ = this;
        this.$nextTick(function () {
          this_.dataForm = Object.assign({}, params.row);
        });
      },
      // 编辑
      submitForm: function () {
        this.$refs.dataForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              var this_ = this;
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              params.t = 'billDetailForm';
              this.utils.request.editUserInfo(params, this.editInfoBack)
            })
          }
        })
      },
      // 新增修改回调
      editInfoBack: function (data) {
        if (data.code == '0000') {
          this.$message({message: '操作成功', type: 'success'})
        } else {
          this.$message({message: '操作失败', type: 'error'})
        }
        this.findPage();
        this.dialogVisible = false
        this.operation = false
        this.editLoading = false
      },

      // 时间格式化
      dateFormat: function (row, column, cellValue, index) {
        return format(row[column.property])
      },

      // 处理表格列过滤显示
      displayFilterColumnsDialog: function () {
        this.$refs.tableColumnFilterDialog.setDialogVisible(true)
      },
      // 处理表格列过滤显示
      handleFilterColumns: function (data) {
        this.filterColumns = data.filterColumns
        this.$refs.tableColumnFilterDialog.setDialogVisible(false)
      },
      // 处理表格列过滤显示
      initColumns: function () {
        this.columns = []
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val)
        })
        this.filterColumns = temp;
      },

      // 批量审核通过
      batchReviewSuccess: function () {
        this.$refs.CyTable.batchOperationMock("审核通过");
      },

      batchAutoRefund: function () {
        this.$refs.CyTable.batchOperationMock("退款成功");
      },

    },
    mounted() {
      this.findPageMock()
      this.initColumns()
    }

  }
</script>
